﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS属性border-collapse的应用</title>
        <style>
            .separate {
                border-collapse: separate
            }
            .collapse {
                border-collapse: collapse
            }
        </style>
    </head>
    <body>
        <h3>CSS属性border-collapse的应用</h3>
        <hr />
        <table border="1" class="separate">
            <caption>
                双线边框效果
            </caption>
            <tr>
			  <td>年份</td>
			  <td>第一季度</td>
			  <td>第二季度</td>
			  <td>第三季度</td>
			</tr>
            <tr><td>2014</td><td>100</td><td>200</td><td>300</td></tr>
            <tr><td>2015</td><td>150</td><td>250</td><td>350</td></tr>
            <tr><td>2016</td><td>200</td><td>300</td><td>400</td></tr>
        </table>
        <br />

        <table border="1" class="collapse">
            <caption>
                折叠边框效果
            </caption>
            <tr>
			  <td>年份</td>
			  <td>第一季度</td>
			  <td>第二季度</td>
			  <td>第三季度</td>
			</tr>
            <tr><td>2014</td><td>100</td><td>200</td><td>300</td></tr>
            <tr><td>2015</td><td>150</td><td>250</td><td>350</td></tr>
            <tr><td>2016</td><td>200</td><td>300</td><td>400</td></tr>
        </table>
    </body>
</html>